<template>

    <div>
        <Card>
            <p slot="title">添加需求</p>

            <Row>
                <Form ref="AddformValidate" :model="modalData.Add.formValidate" :rules="modalData.Add.ruleValidate" :label-width="100">

                    <Row>
                        <Col span="12" style="z-index: 1002;">
                            <Form-item label="项目名称" prop="project_id">
                                <Select v-model="modalData.Add.formValidate.project_id" :error="modalData.Add.formItemError.project_id" placeholder="请选择项目名称">
                                    <Option v-for="item in projectData" :value="item.id" :key="item.id">{{item.name}}</Option>
                                </Select>
                            </Form-item>
                        </Col>
                    </Row>

                    <Row>
                        <Col span="12" style="z-index: 1001;">
                            <Form-item label="功能名称" prop="action_id">
                                <Select v-model="modalData.Add.formValidate.action_id" :error="modalData.Add.formItemError.action_id" placeholder="请选择功能名称，如果没有功能名称，请查看是否选择项目名称">
                                    <Option v-for="item in showActionData" :value="item.id" :key="item.id">{{item.name}}</Option>
                                </Select>
                            </Form-item>
                        </Col>
                    </Row>

                    <Row>
                        <Col span="12" style="z-index: 1000;">
                            <Form-item label="紧急程度" prop="urgency_level">
                                <Select v-model="modalData.Add.formValidate.urgency_level" :error="modalData.Add.formItemError.urgency_level" placeholder="请选择需求紧急程度">
                                    <Option :value="1">普通</Option>
                                    <Option :value="2">紧急</Option>
                                    <Option :value="3">很紧急</Option>
                                    <Option :value="4">非常紧急</Option>
                                </Select>
                            </Form-item>
                        </Col>
                    </Row>

                    <Row>
                        <Col span="12">
                            <Form-item label="需求名称" prop="name" :error="modalData.Add.formItemError.name">
                                <Input v-model="modalData.Add.formValidate.name" placeholder="请输入需求名称"></Input>
                            </Form-item>
                        </Col>
                    </Row>

                    <Row>
                        <Col span="22">
                            <Form-item label="需求描述">
                                <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
                            </Form-item>
                        </Col>
                        <!--<Col span="24">-->
                            <!--<Form-item label="需求描述" prop="detail" :error="modalData.Add.formItemError.detail">-->
                                <!--<Input v-model="modalData.Add.formValidate.detail" placeholder="请输入需求描述" type='textarea' :rows="10"></Input>-->
                            <!--</Form-item>-->
                        <!--</Col>-->
                    </Row>

                    <!--<FormItem label="预计完成时间" prop="complete_date" :error="modalData.Add.formItemError.complete_date">-->
                        <!--<DatePicker type="date" placeholder="请选择预计完成时间" v-model="modalData.Add.formValidate.complete_date"></DatePicker>-->
                    <!--</FormItem>-->

                    <!--<Row>-->
                        <!--<Col span="12">-->
                            <!--<Form-item label="需求截图">-->
                                <!--<Row>-->
                                    <!--<img-upload :imgList="modalData.Add.formValidate.imgList"></img-upload>-->
                                <!--</Row>-->
                            <!--</Form-item>-->
                        <!--</Col>-->
                    <!--</Row>-->
                </Form>
            </Row>
            <Row style="margin-left:50px;">
                <Button type="warning" @click="closePage">返回</Button>
                <Button style="margin-left:50px;" :loading="modalData.Add.loading" type="success" @click="modalAddFunc">添加需求</Button>
            </Row>

        </Card>
    </div>

</template>

<script>
    import imgUpload from './imgUpload';
    import util from '../../../libs/util';
    import Uediter from '../../../components/UE';
    import qs from 'qs';
    export default {
        name: 'add',
        props: [
            'projectData',
            'actionData'
        ],
        components: {
            Uediter,
            imgUpload
        },
        data () {
            return {
                ueditor: {
                    value: '编辑器默认文字',
                    config: {}
                },
                model1: '',
                project_id: null,
                modalData: {
                    Add: {
                        formValidate: {
                            project_id: '',
                            action_id: '',
                            name: '',
                            detail: '',
                            // complete_date: '',
                            imgList: [],
                            urgency_level: 1
                        },
                        ruleValidate: {
                            project_id: [
                                { required: true, type: 'number', message: '请选择项目名称', trigger: 'blur' }
                            ],
                            action_id: [
                                { required: true, type: 'number', message: '请选择功能名称', trigger: 'blur' }
                            ],
                            name: [
                                { required: true, message: '需求名称不能为空', trigger: 'blur' }
                            ],
                            detail: [
                                { required: true, message: '需求描述不能为空', trigger: 'blur' }
                            ],
                            // complete_date: [
                            //     { required: true, type: 'date', message: '预计完成时间不能为空', trigger: 'blur' }
                            // ],
                            urgency_level: [
                                { required: true, type: 'number', message: '请选择需求紧急程度', trigger: 'blur' }
                            ]
                        },
                        formItemError: {
                            action_id: '',
                            project_id: '',
                            name: '',
                            detail: '',
                            urgency_level: ''
                        },
                        loading: false
                    }
                },
                showActionData: []
            };
        },

        methods: {
            // 增加
            modalAddFunc () {
                let _this = this;
                console.log('modalData.Add.formValidate.role_id -->', this.modalData.Add.formValidate.role_id);
                this.modalData.Add.loading = true;

                // 初始化所有字段错误信息的值
                for (let key in this.modalData.Add.formItemError) {
                    this.modalData.Add.formItemError[key] = '';
                }
                // console.log('_this.modalData.Add.formValidate.urgency_level ->', _this.modalData.Add.formValidate.urgency_level, typeof _this.modalData.Add.formValidate.urgency_level);
                this.$refs['AddformValidate'].validate((valid) => {
                    if (valid) {
                        console.log(_this.modalData.Add.formValidate.imgList);
                        let imgList = [];
                        for (let i = 0; i < _this.modalData.Add.formValidate.imgList.length; i ++) {
                            let item = _this.modalData.Add.formValidate.imgList[i];
                            imgList.push(item.url);
                        }
                        let params = {
                            'project_id': _this.modalData.Add.formValidate.project_id,
                            'action_id': _this.modalData.Add.formValidate.action_id,
                            'name': _this.modalData.Add.formValidate.name,
                            'remark': _this.$refs.ue.getUEContent(),
                            // 'remark': _this.modalData.Add.formValidate.detail,
                            // 'complete_date': util.dateFormat(_this.modalData.Add.formValidate.complete_date),
                            // 'img_list': imgList.join('|'),
                            'urgency_level': _this.modalData.Add.formValidate.urgency_level
                        };

                        console.log('params -->', params);

                        util.ajax.post('api/demand/add/0', qs.stringify(params)).then(res => {
                            if (res.data.code === 200) {
                                // this.modalAdd = false;
                                _this.$Notice.success({
                                    title: '添加成功',
                                    duration: 2
                                });
                                // this.initData();
                                _this.closePage();
                            } else {
                                // 添加失败
                                for (let key in res.data.msg) {
                                    _this.modalData.Add.formItemError[key] = res.data.msg[key][0].message;
                                }
                            }
                            _this.modalData.Add.loading = false;
                        });
                    } else {
                        _this.modalData.Add.loading = false;
                    }
                });
            },
            closePage () {
                this.$emit('closeAddPage');
            }
        },

        watch: {
            // 当添加模态对话框中添加的
            'modalData.Add.formValidate.project_id': function () {
                this.showActionData = [];
                let projectId = this.modalData.Add.formValidate.project_id;
                if (projectId) {
                    let tmp = [];
                    for (let i = 0; i < this.actionData.length; i++) {
                        console.log('this.actionData.project_id -->', this.actionData.project_id);
                        console.log('projectId -->', projectId);
                        if (projectId === this.actionData[i].project_id) {
                            tmp.push({
                                id: this.actionData[i].id,
                                name: this.actionData[i].name
                            });
                        }
                    }
                    this.showActionData = tmp;
                }
            }
        }
    };
</script>

<style scoped>

</style>
